<template>
  <div class="tiptap-menu" v-if="editorInstance">
    <div class="menu-group">
      <label for="title"><el-text truncated>《&nbsp;&nbsp; {{ nodeInfo.title }} &nbsp;&nbsp;》 </el-text></label>
    </div>
    <!-- 文本样式 -->
    <div class="menu-group">
      <button type="button" @click="editorInstance.chain().focus().toggleBold().run()"
        :class="{ 'is-active': editorInstance.isActive('bold') }" title="加粗">
        <span class="icon-bold">B</span>
      </button>
      <button type="button" @click="editorInstance.chain().focus().toggleItalic().run()"
        :class="{ 'is-active': editorInstance.isActive('italic') }" title="斜体">
        <span class="icon-italic">I</span>
      </button>
      <button type="button" @click="editorInstance.chain().focus().toggleUnderline().run()"
        :class="{ 'is-active': editorInstance.isActive('underline') }" title="下划线">
        <span class="icon-underline">U</span>
      </button>
      <button type="button" title="公式"  @click="insertMathInline">
      <span class="icon-strikethrough"><el-text truncated>公式</el-text></span>
      </button>
      <button type="button" title="保存" :disabled="!isUpdate" @click="nodeInfo.save()">
        <span class="icon-strikethrough"><el-text truncated>保存</el-text></span>
      </button>
     <button type="button" title="补全"  @click="openbuquan">
        <span class="icon-strikethrough"><el-text truncated>{{buquanText}}</el-text></span>
      </button>
    </div>

    <!-- 标题和段落 -->
    <div class="menu-group">
      <select v-model="headingLevel" @change="setHeading" title="标题级别">
        <option value="">正文</option>
        <option value="1">标题1</option>
        <option value="2">标题2</option>
        <option value="3">标题3</option>
      </select>
    </div>

    <!-- 列表 -->
    <div class="menu-group">
      <button type="button" @click="editorInstance.chain().focus().toggleBulletList().run()"
        :class="{ 'is-active': editorInstance.isActive('bulletList') }" title="无序列表">
        <span class="icon-list">•</span>
      </button>
      <button type="button" @click="editorInstance.chain().focus().toggleOrderedList().run()"
        :class="{ 'is-active': editorInstance.isActive('orderedList') }" title="有序列表">
        <span class="icon-list-numbered">1.</span>
      </button>
    </div>

    <!-- 其他功能 -->
    <div class="menu-group">
      <button type="button" @click="editorInstance.chain().focus().toggleBlockquote().run()"
        :class="{ 'is-active': editorInstance.isActive('blockquote') }" title="引用">
        <span class="icon-quote">"</span>
      </button>
      <button type="button" @click="editorInstance.chain().focus().setHorizontalRule().run()" title="水平线">
        <span class="icon-hr">—</span>
      </button>
    </div>

    
    <!-- <div class="menu-group">
      <shuatibotton />
    </div>
    <div class="menu-group">
     <wrongquestion/>
    </div>
    <div class="menu-group">
     <myquestion/>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores/editStore';
import { storeToRefs } from 'pinia';
import { watch, ref, onMounted,onUnmounted } from 'vue';
import { currentNodeInfo } from "@/stores/currentNodeStore";
import { SuggestionPlugin,createRequestAI } from '@/tiptap/extensions/SuggestionPlugin';
import shuatibotton from '@/components/AI/StudentsExcise.vue';
import myquestion from '@/components/AI/myquestion/index.vue';
import wrongquestion from '@/components/AI/wrongquestion/index.vue';


const headingLevel = ref('');
const editorStore = useEditorStore();
const { editorInstance } = storeToRefs(editorStore);
const nodeInfo = currentNodeInfo()
const { isUpdate } = storeToRefs(nodeInfo);
/**
 * ctrl+s保存功能
 * ctrl+q补全功能
 * @param e 
 */



const handleKeyDown = (e) => {
  // 检测 Ctrl + S 
  if (e.ctrlKey  && e.key === 's') {
    e.preventDefault(); // 阻止浏览器默认保存行为
      nodeInfo.save()
  }
    if (e.ctrlKey  && e.key === 'q') {
    e.preventDefault(); 
     openbuquan()
  }
};



// 设置标题的方法
const setHeading = () => {
  if (!editorInstance.value) return;

  const level = headingLevel.value;
  if (level) {
    editorInstance.value.chain().focus().toggleHeading({ level: parseInt(level) }).run();
  } else {
    editorInstance.value.chain().focus().setParagraph().run();
  }
};



// 设置链接的方法


// 监听编辑器实例变化
watch(editorInstance, (newVal) => {
  if (newVal) {
    // 编辑器已准备好，可以执行操作
    console.log('编辑器已挂载，菜单组件已准备好');

    // 监听编辑器内容变化，更新标题级别状态
    editorInstance.value.on('transaction', () => {
      updateHeadingLevel();
    });
  }
});

// 更新标题级别状态
const updateHeadingLevel = () => {
  if (!editorInstance.value) return;

  for (let i = 1; i <= 3; i++) {
    if (editorInstance.value.isActive('heading', { level: i })) {
      headingLevel.value = i.toString();
      return;
    }
  }
  headingLevel.value = '';
};


const insertMathInline = () => {
  if (editorInstance.value){
    // 插入一个默认的公式
    const defaultLatex = 'x + y '
    editorInstance.value.commands.insertContent({
      type: 'inlineMath',
      attrs: {
        latex: defaultLatex,
        evaluate: 'yes',
        display: 'no'
      }
    })
  }
}
// 组件挂载时初始化
onMounted(() => {
  if (editorInstance.value) {
    updateHeadingLevel();
    
  }
  document.addEventListener('keydown', handleKeyDown);
});

// 组件卸载时移除监听（
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown);
});

const buquanText = ref("开启补全")

const openbuquan = ()=>{
     if(buquanText.value == '开启补全'){
       editorInstance.value.registerPlugin(
        SuggestionPlugin(editorInstance.value, createRequestAI(editorInstance.value)))
        buquanText.value = "关闭补全"
     }else{
        editorInstance.value.unregisterPlugin("copilot-suggestion")
          buquanText.value = "开启补全"
}    
}
</script>

<style scoped>
.tiptap-menu {
  display: flex; /* 使用 Flexbox 布局，使子元素水平排列 */
  /* flex-wrap: wrap; */ /* 注释掉的属性，原本用于允许子元素换行显示 */
  text-align: center; /* 设置文本居中对齐 */
  justify-content: space-between; /* 子元素在主轴上两端对齐，间距平均分布 */
  gap: 20px; /* 子元素之间的间距为 20px */
  padding: 8px; /* 内边距为 8px，内容与边框之间留出空间 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框为 1px 的浅灰色实线 */
  /* 透明背景 */ /* 注释说明下面一行是设置透明背景色 */
  background-color: rgb(red, green, blue, 0); /* 设置背景颜色为完全透明，但写法有误，应使用 rgba(0, 0, 0, 0) 或 transparent */
}

.menu-group {
  display: flex; /* 使用 Flexbox 布局，使子元素水平排列 */
  gap: 4px; /* 子元素之间的间距为 4px */
  align-items: center; /* 子元素在交叉轴上垂直居中对齐 */
  padding-right: 8px; /* 右内边距为 8px，右侧与其他元素保持距离 */
  border-right: 1px solid #ddd; /* 右侧边框为 1px 的浅灰色实线 */
}

.menu-group:last-child {
  border-right: none; /* 最后一个 .menu-group 元素去掉右侧边框 */
}

button {
  background: white; /* 按钮背景色为白色 */
  border: 1px solid #ddd; /* 边框为 1px 的浅灰色实线 */
  border-radius: 4px; /* 边框圆角半径为 4px，使按钮边缘圆润 */
  padding: 4px 8px; /* 内边距上下为 4px，左右为 8px，文字与边框之间留出空间 */
  cursor: pointer; /* 鼠标悬停时显示为手型，表示可点击 */
  font-size: 14px; /* 字体大小为 14px */
}

button:hover {
  background: #f0f0f0; /* 鼠标悬停时按钮背景色变为较浅的灰色 */
}

button.is-active {
  background: #e0e0e0; /* 当按钮处于激活状态时，背景色变为更深的灰色 */
  color: #333; /* 激活状态下文字颜色为深灰色 */
}

button:disabled {
  opacity: 0.5; /* 禁用状态下的按钮透明度降低，看起来不可用 */
  cursor: not-allowed; /* 鼠标悬停时显示禁止图标，表示不可点击 */
}

select {
  padding: 4px; /* 下拉选择框的内边距为 4px */
  border-radius: 4px; /* 边框圆角半径为 4px，使下拉框边缘圆润 */
  border: 1px solid #ddd; /* 边框为 1px 的浅灰色实线 */
  background: white; /* 背景色为白色 */
  cursor: pointer; /* 鼠标悬停时显示为手型，表示可点击 */
}
</style>
